<template>
    <div style="background-color: #F4F4F4;">
        <Header />
        <div class="topTitle">
            专题推荐
        </div>
        <div class="indexContainer">
            <div class="content">
                <div class="mapNav">
                    <div class="indexContainer">
                        <el-breadcrumb separator-class="el-icon-arrow-right">
                            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
                            <el-breadcrumb-item>专题推荐搜索</el-breadcrumb-item>
                        </el-breadcrumb>
                    </div>
                </div>
                <el-empty :image-size="100" v-if="listData.length==0"  description="暂无数据"></el-empty>
                <div class="cplist" v-loading="loading">
                    <div v-for="i in listData" :key="i.id" class="cplist_line" @click="gotoDetail(i.id)">
                        <div><img class="proImg" :src="i.thumbnail" /></div>
                        <div class="proOne">
                            <img src="@/assets/images/ApplicationProducts3.png" />
                            <p >
                                {{ i.title }}</p>
                        </div>
                        <div class="proTwo">
                            <i class="el-icon-time smallIcon"></i>
                            <p>上架时间：{{ i.shelfTime }}</p>
                        </div>
                        <div class="proThree">
                            <i class="el-icon-refresh-right smallIcon"></i>
                            <p v-if="i.updateFrequency == 5">更新频率：每年</p>
                            <p v-if="i.updateFrequency == 4">更新频率：每月</p>
                            <p v-if="i.updateFrequency == 3">更新频率：每周</p>
                            <p v-if="i.updateFrequency == 2">更新频率：每天</p>
                            <p v-if="i.updateFrequency == 1">更新频率：实时</p>
                        </div>
                        <div class="proFour">
                            {{ i.description }}
                        </div>
                        <div class="proFive">
                            <div class="fiveItem" v-if="i.source == 1">
                                内部产品</div>
                            <div class="fiveItem" v-if="i.source == 2">
                                外部产品</div>
                            <div class="fiveItem">
                                {{ i.categoryName }}</div>
                        </div>
                        <div class="proSix">
                            供应商：{{ i.supplier }}
                        </div>
                    </div>
                </div>
                <div class="pageContent">
                    <el-pagination v-if="listData.length != 0" background layout="total,prev, pager, next,sizes,jumper"
                        @size-change="handleSizeChange" :total="total" :page-sizes="[12, 24, 36, 48]" :page-size="params.pageSize"
                        :pager-count="5" :current-page.sync="params.current" @current-change="handleCurrentChange">
                    </el-pagination>
                </div>
            </div>
        </div>

        <Footer />
    </div>
</template>
<script>
import Header from "@/components/home/header/header";
import Footer from "@/components/home/footer/footer";
import {
    ApplicationProductsList
} from "@/request/api/ApplicationProducts";
import {dateFormat} from "@/utils/dateFormat.js"
export default {
    components: {
        Header,
        Footer,
    },
    data() {
        return {
            loading: true,
            total: 0,
            listData: [],
            sjTime: [],
            userId: '',
            params:{
                type: '1',
                current: 1,
                pageSize: 12,
                topicId:this.$route.query.id,//专题ID
            }
        };
    },
    created() {
        if (window.sessionStorage.getItem("userInfo") !== null) {
            this.userInfo = JSON.parse(window.sessionStorage.getItem("userInfo"));
            this.userId = this.userInfo.id
        }
        this.getList()
    },
    methods: {
        // 获取列表
        getList() {
            ApplicationProductsList(this.params).then((res) => {
                this.loading = false
                if (res.data.code == 1) {
                    this.listData = res.data.data.totalList
                    this.listData.forEach((item) => {
                        item.shelfTime=dateFormat(item.shelfTime)
                    })
                    this.total = res.data.data.total

                }
            })
        },
        // 跳转详情页面
        gotoDetail(id) {
            this.$router.push({
                name: "ApplicationProductsDetail",
                query: {
                    id,
                    userId: this.userId
                }
            });
        },
        handleSizeChange(val) {
            this.params.pageSize = val;
            this.params.current = 1;
            this.getList();
        },
        handleCurrentChange(val) {
            this.params.current = val;
            this.getList();
        },
    },
};
</script>
<style lang="less" scoped>
@import "./specialProduct.less";
</style>